<template>
  <div class="detail__wrap">
    <div class="detail__wrap--header" @click="toggleClick">
      <div class="lineTitle">
        <div v-if="title">
          {{ title }}
          <el-tooltip
            v-if="message"
            effect="dark"
            :content="message"
            placement="right"
          >
            <i class="el-icon-warning-outline" />
          </el-tooltip>
        </div>
      </div>

      <div v-if="collapsed">
        <el-icon v-if="!show"><ArrowRightBold /></el-icon>
        <el-icon v-else><ArrowDownBold /></el-icon>
      </div>

      <div v-else>
        <slot name="toolbar"></slot>
      </div>
    </div>
    <el-collapse-transition>
      <div v-show="show" class="detail__content" :style="contentStyleObj">
        <slot name="content">
          <el-row type="flex">
            <el-col
              v-for="(item, $index) in schema"
              :key="$index"
              :span="item.span || 12"
            >
              <div
                class="detail__content--item"
                :class="{ 'detail__content--flex': !vertical }"
              >
                <div class="content__item--label" :style="labelStyleObj">
                  <slot :name="item.prop" :row="item">
                    {{ item.label }}
                  </slot>
                </div>
                <div class="content__item--message" :style="messageStyleObj">
                  <slot :name="`${item.prop}Content`" :row="data">
                    <span v-if="item.type == 'price'"
                      >￥
                      {{
                        itemLabel(
                          handleRowAccordingToProp(data, item.prop),
                          item.valueKey
                        )
                      }}</span
                    >
                      <el-link v-if="item.type == 'link'"
                      :href="itemLabel(
                          handleRowAccordingToProp(data, item.prop),
                          item.valueKey
                        )"
                      >点击跳转</el-link
                    >
                    <span v-if="item.type == 'image'">
                      <ImagePreview :src="data[item.prop]"></ImagePreview>
                    </span>
                    <span v-else>{{
                      itemLabel(
                        handleRowAccordingToProp(data, item.prop),
                        item.valueKey
                      )
                    }}</span>
                  </slot>
                </div>
              </div>
            </el-col>
          </el-row>
        </slot>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script setup lang="tsx">
import {
  ref,
  reactive,
  defineEmits,
  onMounted,
  PropType,
  computed,
  shallowRef,
} from "vue";
import { itemLabel, handleRowAccordingToProp } from "/@ts/hooks/format";
import ImagePreview from "/@/components/ImagePreview/index.vue";

const state = reactive({});

const props: any = defineProps({
  // 详情标题
  title: {
    type: String as PropType<string>,
    default: "基本信息",
  },
  // 是否可折叠
  collapsed: {
    type: Boolean as PropType<boolean>,
    default: true,
  },
  // 辅助提示
  message: {
    type: String as PropType<string>,
    default: "",
  },
  // 是否需要边框
  border: {
    type: Boolean as PropType<boolean>,
    default: true,
  },
  // 需要展示的数据
  data: {
    type: Object as PropType<object>,
    required: true,
  },
  // 布局展示的数据
  schema: {
    type: Array as PropType<any[]>,
    required: true,
  },
  // 是否标题和内容各占一行 垂直布局
  vertical: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
  // 标题宽度
  labelWidth: {
    type: String as PropType<string>,
    default: "150px",
  },
  // 标题位置
  labelAlign: {
    type: String as PropType<string>,
    default: "left",
  },
  // 边框颜色
  borderColor: {
    type: String as PropType<string>,
    default: "var(--el-border-color-lighter)",
  },
  // 标题背景颜色
  labelBg: {
    type: String as PropType<string>,
    default: "var(--labelBg-detail)",
  },
  //  data: {
  //     //表格数据
  //     type: Object,
  //     default: null,
  //   },
  //    column:{
  //     //列数
  //     type: Number,
  //     default: 2,
  //    },
  //   columns: {
  //     //列数据
  //     type: Array,
  //     default: [],
  //   },
  //   title:{
  //     type: String,
  //     default: '基本信息',
  //   }
});
const show = shallowRef<boolean>(true);

const contentStyleObj = computed(() => {
  return {
    borderTop: props.border ? `1px solid ${props.borderColor}` : "",
    borderLeft: props.border ? `1px solid ${props.borderColor}` : "",
  };
});

const labelStyleObj = computed(() => {
  return {
    width: props.vertical ? `calc(100% - 33px)` : props.labelWidth,
    textAlign: props.labelAlign,
    backgroundColor: props.border ? props.labelBg : "",
    borderRight: props.border ? `1px solid ${props.borderColor}` : "",
    borderBottom: props.border ? `1px solid ${props.borderColor}` : "",
  };
});

const messageStyleObj = computed(() => {
  return {
    width: props.vertical ? `calc(100% - 33px)` : "100%",
    borderRight: props.border ? `1px solid ${props.borderColor}` : "",
    borderBottom: props.border ? `1px solid ${props.borderColor}` : "",
  };
});

function toggleClick() {
  if (props.collapsed) {
    show.value = !show.value;
  }
}
</script>

<style scoped lang="scss">
.detail__wrap {
  // background: var(--geeker-bg-color);
  border-radius: 2px;
  padding: 10px;
  .detail__wrap--header {
    display: flex;
    height: 32px;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    .detail__wrap--title {
      display: inline-block;
      font-size: 18px;
      font-weight: 700;
      //color: rgba(0, 0, 0, 0.85);
      position: relative;
      margin-left: 10px;
      &:after {
        content: "";
        width: 3px;
        height: 100%;
        background: #2d8cf0;
        border-radius: 2px;
        position: absolute;
        top: 1px;
        left: -10px;
      }
    }
    .el-icon-arrow-down {
      transition: all 0.2s;
    }
    .el-icon-arrow-down-transform {
      transform: rotate(-180deg);
    }
  }
  .detail__content {
    :deep .el-row {
      flex-wrap: wrap;
    }
    .detail__content--flex {
      display: flex;
      height: 100%;
    }
    .content__item--label {
      font-size: 14px;
      padding: 8px 16px;
      color: var(--labelTextColor-detail);
    }
    .content__item--message {
      flex: 1;
      font-size: 14px;
      padding: 8px 16px;
      line-height: 20px;
      color: var(--el-text-color-regular);
    }
  }
}
</style>
